<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router'
import $api from '@/api'
import { ref, watch } from 'vue'
import useToast from '@/hooks/useToast'
const $route=useRoute(),$router=useRouter()
const order=ref<any>({}),pays=ref([
  {name:'积分',value:'integral',icon:'icon-integral',checked:false},
  //{name:'支付宝',value:'alipay',icon:'icon-alipay',checked:false},
]),payBtn=ref('请选择支付方式'),canPay=ref(false)
const id=$route.query.id
function init(){
  if(id){
    const {data}=$api.order.getOne(id)
    watch(data,(_data:any) =>{
      order.value=_data
    })
  }
}
//选择支付方式
function changePay(item) {
  pays.value.map(val =>val.checked=false)
  item.checked=true
  payBtn.value=`${item.name}支付￥${order.value.total_fee}`
  canPay.value=true
}
//确认支付
function submitPay() {
  if(!canPay.value) return
  const {data}=$api.pay.payIntegral(id)
  watch(data,(_data) =>{
    useToast('支付成功')
    _hmt.push(['integralPay','pay','click','id',id])
    $router.replace({
      path:'/'
    })
  })
}
init()
</script>

<template>
  <div>
    <div
      w:flex="~ nowrap"
      w:justify="center"
      w:align="items-end"
      w:text="red-500"
      w:m="y-4"
    >
      <span
        w:text="4xl"
      >￥</span>
      <span
        w:text="5xl"
      >{{order.total_fee}}</span>
    </div>
    <div></div>
    <div v-for="(item,idx) in pays" :key="idx"
      w:flex="~ nowrap"
      w:justify="between"
      w:align="items-center"
      w:p="4"
    >
      <div
        w:flex="~ nowrap"
        w:align="items-center"
      >
        <div class="iconfont" :class="[item.icon]"
          w:text="5xl blue-500"
          w:m="x-8"
        ></div>
        <div
          w:text="3xl"
          w:font="bold"
        >{{item.name}}</div>
      </div>
      <div class="iconfont icon-check-on" v-show="item.checked" @click="changePay(item)"
        w:text="5xl red-500"
      ></div>
      <div class="iconfont icon-check-off" v-show="!item.checked" @click="changePay(item)"
        w:text="5xl gray-500"
      ></div>
    </div>
    <div
      w:w="full"
      w:h="24"
      w:flex="~"
      w:align="items-stretch"
      w:justify="center"
      w:pos="absolute bottom-0 left-0"
    >
      <div @click="submitPay" :class="[canPay?'':'opacity-50']"
        w:flex="~ nowrap 1"
        w:justify="center"
        w:align="items-center"
        w:bg="red-500"
        w:text="white"
        w:border="rounded-full"
        w:m="y-4 x-8"
      >
        {{payBtn}}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '支付',
    auth: true
  }
}
</route>